import * as React from "react";
import {
  Row,
  Col,
  Button,
  Modal,
  InputNumber,
  DatePicker,
  Input,
  Select,
  Form,
} from "antd";
import { AjaxData } from "../../../../../../data/interface/publicInterface";
import { WebVariable } from "../../../../../../data/WebVariable";
import { PlusOutlined } from "@ant-design/icons";
import { energyStore } from "../../../ServeApi";
import "./index.less";
const DatePickers:any= DatePicker;
const { Option } = Select;
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 8 },
    md: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
    md: { span: 16 },
  },
};
interface fromData {
  energyTypeId: string;
  inAmount: number;
  unit: string;
  inTime?: any;
  remark?: string;
}
export interface ActionToolBarProps {
  onChange: (type: string, ajax: boolean) => any;
}

export interface ActionToolBarState {}

class ActionToolBar extends React.Component<
  ActionToolBarProps,
  ActionToolBarState
> {
  private type: string = "1";
  private addtype: string = "1";
  private isModalVisible: boolean = false;
  private instance: any = null;
  render() {
    return (
      <div className="ActionToolBar">
        <div className="rowcon_body" style={{ paddingTop: 16 }}>
          能源类型：
          {WebVariable.categoryType.map((item) => {
            return (
              <Button
                className="btnType"
                type={this.type === item.key ? "primary" : "text"}
                onClick={() => {
                  this.type = item.key;
                  this.forceUpdate();
                  this.props.onChange(this.type, true);
                }}
              >
                {item.label}
              </Button>
            );
          })}
          <Button
            className="f-right"
            type="primary"
            icon={<PlusOutlined />}
            onClick={() => {
              this.ifVisible();
            }}
          >
            新增入库
          </Button>
        </div>
        <Modal
          title="新增入库"
          visible={this.isModalVisible}
          onOk={() => {
            this.handleOk();
          }}
          onCancel={() => {
            this.handleCancel();
          }}
        >
          <Form {...formItemLayout} ref={(el) => (this.instance = el)}>
            <Row>
              <Col span={24}>
                <Form.Item
                  label="能源类型："
                  name="energyTypeId"
                  rules={[
                    {
                      required: true,
                      message: "能源类型必填",
                    },
                  ]}
                >
                  <Select placeholder="请选择能源类型">
                    {WebVariable.categoryType.map((item: any) => {
                      return (
                        <Option value={item.key} key={item.key}>
                          {item.label}
                        </Option>
                      );
                    })}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={24}>
                <Form.Item
                  label="入库数量"
                  name="inAmount"
                  rules={[
                    {
                      required: true,
                      message: "入库数量必填",
                    },
                  ]}
                >
                  <InputNumber
                    style={{ width: "100%" }}
                    placeholder="请填写入库数量"
                    min={0}
                  />
                </Form.Item>
              </Col>
              <Col span={24}>
                <Form.Item
                  label="计量单位"
                  name="unit"
                  rules={[
                    {
                      required: true,
                      message: "计量单位必填",
                    },
                  ]}
                >
                  <Input placeholder="请填写计量单位" />
                </Form.Item>
              </Col>
              <Col span={24}>
                <Form.Item label="入库时间" name="inTime">
                  <DatePickers
                    allowClear={false}
                    placeholder="请填写入库时间"
                    style={{ width: "100%" }}
                  />
                </Form.Item>
              </Col>
              <Col span={24}>
                <Form.Item label="描述说明" name="remark">
                  <Input.TextArea />
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Modal>
      </div>
    );
  }
  componentDidMount() {}
  //弹窗取消
  handleCancel() {
    this.ifVisible();
    this.clearFromData();
  }
  //弹窗确认
  handleOk() {
    let _this = this;
    const container: any = (this.instance as any) as HTMLDivElement;
    container
      .validateFields()
      .then((res) => {
        _this.ifVisible();
        _this.setPream(res);
        _this.clearFromData();
      })
      .catch((err) => {
        console.log(err);
      });
  }
  setPream(item: fromData) {
    this.addtype = item.energyTypeId;
    this.forceUpdate();
    for (let key in item) {
      if (!item[key]) {
        item[key] = null;
      }
    }
    item.inTime = item.inTime ? "" + item.inTime.valueOf() : null;
    this.energyStore(item);
  }
  ifVisible() {
    this.isModalVisible = !this.isModalVisible;
    this.forceUpdate();
  }
  //清空From表单
  clearFromData() {
    if (this.instance) {
      const container: any = (this.instance as any) as HTMLDivElement;
      container.setFieldsValue({
        energyTypeId: undefined,
        inAmount: undefined,
        unit: undefined,
        inTime: undefined,
        remark: undefined,
      });
    }
  }
  /**请求数据 */
  //新增入库
  async energyStore(item) {
    let _this = this;
    try {
      let res: any = await energyStore(JSON.stringify(item)).catch((err) => {
        console.log(err);
      });
      let json: AjaxData = res;
      if (json.success) {
        this.props.onChange(this.type, this.type === this.addtype);
      } else {
        Modal.error({
          title: json.message,
          onOk: () => {},
        });
      }
    } catch (error) {
      Modal.error({
        title: "初始化程序失败，无法读取数据，请刷新页面。",
        onOk: () => {
          _this.setState({ loading: false });
        },
      });
      console.error(error);
    }
  }
}

export default ActionToolBar;
